<extend name="Extends/base"/>
<block name="title">绑定手机号</block>
<block name="css">
</block>
<block name="body_style">class="bgc-fff"</block>
<block name="body">
    <div class="c-main plr15">
        <form id='myForm'>
            <ul class="mb10 phone-list">
                <h2 class="phone-title">绑定手机号</h2>
                <li class="ptb10">
                    <div class="phone-list-txt width-30">手机号码</div>
                    <div class="phone-list-num c-position-r">
                        <input type="text" name="phone" value="" placeholder="请输入您的手机号码"
                               class="width-100 phone-input"/>
                        <div class="phone-clear"></div>
                    </div>
                </li>
                <li class="ptb10">
                    <div class="phone-list-txt width-30">图形验证</div>
                    <div class="phone-list-num">
                        <input type="text" name="img_code" placeholder="请输入图形验证码" class="width-50 phone-input"/>
                        <div style="display: inline-block;width: 4rem;height: 1.6rem;line-height: 1.6rem;margin-left: 1.5rem;">
                            <img class="img-code" src="{:C('WEB_DOMAIN')}/imgCode/verityEntry">
                        </div>
                    </div>
                </li>
                <li class="ptb10">
                    <div class="phone-list-txt width-30">短信验证码</div>
                    <div class="phone-list-num">
                        <input type="text" name="code" placeholder="请输入验证码" class="width-50 phone-input"/>
                        <div class="code-box">获取验证码</div>
                    </div>
                </li>
            </ul>
        </form>
        <p class="phone-tip">*每月只可以更改一次手机号码</p>
        <div class="plr15">
            <a href="javascript:;" class="phone-sublime">提交</a>
        </div>
    </div>
</block>
<block name="js">
    <script type="text/javascript" src="__APPS__/js/api.js?v={:C('JS_CSS_VERSION')}"></script>
    <script type="text/javascript">
        var reback = "{$reback}";
        //点击获取短信验证码
        var originalCodeBoxText;
        var codeBoxCanClick = true;
        $('.c-main').on('click', '.code-box', function () {
            if (!codeBoxCanClick) {
                return false;
            }
            var phone = $('input[name=phone]').val();
            if (!phone) {
                $.toast("请输入手机号码");
                return false;
            }

            var imgCode = $('input[name=img_code]').val();
            if (!imgCode) {
                $.toast("请输入图形验证码");
                return false;
            }

            doGetBindPhoneSmsCode(phone, imgCode, function (res) {
                //刷新图形验证码
                refreshImgCode();

                if (res.Code != 10000) {
                    $.toast(res.Message);
                    return false;
                }
                $.toast("短信已发送");
                codeBoxCanClick = false;
                originalCodeBoxText = $('.code-box').text();
                $('.code-box').text(120);
                var index = setInterval(function () {
                    var sec = parseInt($('.code-box').text()) - 1;
                    if (sec <= 0) {
                        clearInterval(index);
                        $('.code-box').text(originalCodeBoxText);
                        codeBoxCanClick = true;
                    } else {
                        $('.code-box').text(sec);
                    }
                }, 1000);

            });
        });

        $('.c-main').on('click', '.img-code', function () {
            refreshImgCode();
        });

        //清空手机号
        $('.c-main').on('click', '.phone-clear', function () {
            $('input[name=phone]').val("");
        });

        //绑定手机号码
        $('.c-main').on("click", '.phone-sublime', function () {
            var code = $('input[name=code]').val();
            if (!code) {
                $.toast("请输入短信验证码");
                return false;
            }

            doUpdataUserPhone(code, function (res) {
                if (res.Code != 10000) {
                    $.toast(res.Message);
                    return false;
                }

                $.toast("更新成功", 1500, function () {
                    if (!reback) {
                        reback = $.domain;
                    }
                    location.href = reback;
                })
            });
        });

        /**
         * 刷新图形验证码
         */
        function refreshImgCode(){
            $('.img-code').attr('src', $.domain+"/imgCode/verityEntry?" + new Date().getTime());
        }
    </script>
</block>